.bk-root {
  @noUi-css-prefix: bk-noUi;
  @nouislider: "../../../node_modules/nouislider/src";
  @import "@{nouislider}/nouislider.base.less";

  .@{noUi-css-prefix}-handle {
    cursor: grab;
    cursor: -webkit-grab;
    &.@{noUi-css-prefix}-active {
      cursor: grabbing;
      cursor: -webkit-grabbing;
    }
  }

  .@{noUi-css-prefix}-tooltip {
    display: none;
    white-space: nowrap;
  }

  .@{noUi-css-prefix}-handle:hover {
    .@{noUi-css-prefix}-tooltip {
      display: block;
    }
  }

  @slider-size: 10px;

  @handle-width: 14px;
  @handle-height: 18px;
  @handle-left: -@handle-width/2;
  @handle-top: -(@handle-height - @slider-size)/2 - 1;

  @slider-margin: (@handle-height - @slider-size)/2 + 1;

  .@{noUi-css-prefix}-horizontal {
    width: 100%;
    height: @slider-size;

    &.@{noUi-css-prefix}-target {
      margin: @slider-margin 0px;
    }
  }
  .@{noUi-css-prefix}-horizontal .@{noUi-css-prefix}-handle {
    width: @handle-width;
    height: @handle-height;
    left: @handle-left;
    top: @handle-top;
  }
  .@{noUi-css-prefix}-vertical {
    width: @slider-size;
    height: 100%;

    &.@{noUi-css-prefix}-target {
      margin: 0px @slider-margin;
    }
  }
  .@{noUi-css-prefix}-vertical .@{noUi-css-prefix}-handle {
    width: @handle-height;
    height: @handle-width;
    left: @handle-top;
    top: @handle-left;
  }

  .@{noUi-css-prefix}-handle {
    &:after, &:before {
      display: none;
    }
  }

  .@{noUi-css-prefix}-connect {
    box-shadow: none;
  }
}
